<template>
  <div class="main-index">
    <div class="index-left">
      <div class="tree-container">
        <el-scrollbar height="500px">
          <el-skeleton :loading="data.isFirst" :rows="10" animated>
            <div>
              <el-tree style="max-width: 600px" :data="data.data" :expand-on-click-node="false" node-key="id"
                :props="defaultProps" :highlight-current="true" default-expand-all @node-click="handleNodeClick">
                <template #default="{ node, data }">
                  <span class="custom-tree-node" :slot-scope="{ data }">
                    <span>
                      <i :class="data.icon"></i>
                      {{ node.label }}
                    </span>
                  </span></template>
              </el-tree>
            </div>
          </el-skeleton>
        </el-scrollbar>
      </div>
      <div style="width:230px ; border-bottom: 1px solid #eee; text-align: center; padding-top: 4px; position: absolute;bottom: 20px;">
        <el-button type="primary" style="margin-top: 8px;width: 200px;" size="small" @click="AddRight()">新增</el-button>
      </div>
     
    </div>



    <div class="index-right">
      <el-skeleton :loading="data.isFirst" :rows="10" animated>
        <el-descriptions class="margin-top" border :label-width="'100px'" :title="data.curr_right.name" :column="3"
          direction="vertical">
          <el-descriptions-item label="权限名称">
            <template v-if="!data.isEdit">{{ data.curr_right.name }}</template>
            <el-input type="text" v-model="data.curr_right.name" v-if="data.isEdit" />
          </el-descriptions-item>

          <el-descriptions-item label="url">
            <template v-if="!data.isEdit && data.curr_right.url == ''"><el-tag type="danger">无</el-tag></template>
            <template v-if="!data.isEdit && data.curr_right.url != ''">{{ data.curr_right.url }}</template>
            <el-input type="text" v-model="data.curr_right.url" v-if="data.isEdit" />
          </el-descriptions-item>

          <el-descriptions-item label="icon">
            <template v-if="!data.isEdit"><i :class="data.curr_right.icon"></i></template>
            <el-input type="text" v-model="data.curr_right.icon" v-if="data.isEdit" />
          </el-descriptions-item>
          <el-descriptions-item label="操作">
            <el-button type="primary" @click="edit()" size="small" v-if="!data.isEdit">编辑</el-button>
            <template v-if="data.isEdit">
              <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" title="确认修改吗?" @confirm="update()"
                @cancel="qxupdate()">
                <template #reference>
                  <el-button size="small" type="primary" plain>保存</el-button>
                </template>
              </el-popconfirm>
            </template>
            <el-button type="danger" @click="del()" size="small"
              v-if="data.curr_right.children.length === 0">删除</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-skeleton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { delright, GetRightTree, updateRight } from '@/api/rights';
import type { Page_Dto } from '@/Dto/Page_Dto';
import type { Right_Dto } from '@/Dto/Request/right/right_Dto';
import Api_Code from '@/Dto/Response/Api_code';
import router from '@/router';
import { ElLoading, ElMessage } from 'element-plus';
import { reactive, ref, watchEffect } from 'vue';

const page = reactive<Page_Dto>({
  page: 1,
  limit: 10,
  total: 0,
})

const data = reactive<Right_Dto>({
  data: [],
  curr_right: {},
  isFirst: true,
  isEdit: false,
  loading: false
})
const event = {

}

const methods = {
  //初始化绑定
  async bind() {
    data.loading = true;
    data.isFisrt = true;
    const res = await GetRightTree({});
    console.log(res.data)
    if (res.code === Api_Code.ok) {
      data.data = res.data;
      console.log(data.data,'1111111')
      data.curr_right = data.data.length == 0 ? {} : data.data[0];
      data.isFirst = false;
      data.loading = false;
    }
  }
}
const selectedNode = ref(null);
const handleNodeClick = (hh) => {
  data.curr_right = hh;
}
const defaultProps = {
  children: 'children',
  id: 'id',
  label: 'name',
}
const del = async () => {
  var res = await delright({
    id: data.curr_right.id
  })
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  await methods.bind();
  loading.close()
  ElMessage({
    message: '操作成功',
    type: 'success',
    plain: true,
  })
}
const AddRight = () => {
  router.push("/right/addright/" + data.curr_right.id + "/" + data.curr_right.name)
}
const edit = () => {
  data.isEdit = !data.isEdit
  console.log(data.isEdit)
}
const update = async () => {
  console.log(data.curr_right, ":::::::::")
  const res = await updateRight({
    ...data.curr_right
  })
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  await methods.bind();
  loading.close()
  ElMessage({
    message: '操作成功',
    type: 'success',
    plain: true,
  })
  data.isEdit = false;
}
const qxupdate = () => {
  console.log(333)
}
watchEffect(() => {
  methods.bind();
})
</script>

<style scoped>
.main-index {
  display: flex;
  height: calc(100vh - 76px - 60px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 8px;
}

.index-left {
  position: relative;
  width: 230px;
  padding-left: 5px;
  height: calc(100vh - 120px);
  border-right: 1px solid #eee;
  display: flex;
  flex-direction: column;

}

.tree-container {
  flex: 1;
  /* 占据剩余空间 */
  overflow-y: auto;
  /* 超出高度显示垂直滚动条 */
  border-bottom: 1px solid #eee;
  /* 可根据需要添加分隔线 */
}

.el-descriptions-item {
  width: 33.33%;
  /* 3 列，每列占 1/3 */
}

.index-right {
  flex: 1;
  padding: 10px;
  background-color: #fdfbfb;
}
</style>